<template>
  <!-- 左边 -->
  <div>
  <div class="banner-outer">
    <div class="banner-left" @mouseout="outright()">
      <ul>
        <div class="first-list">
          全部商品分类
        </div>
        <li @mouseover="over(index)" v-for="(item,index) in listener">
          <img v-bind:src="item.pic"/>
          <h5>{{item.title}}</h5>
          <div class="product">
            <a href="#">
              <span class="colorAnimate" v-for="key in item.defaultsSort">{{key.name}}</span>
            </a>
          </div>
        </li>
      </ul>
    </div>
      <div>
      <ul id="BannerLii" v-if="BannerLii">
        <li v-for="(it,index) in listener" v-if="state" class="states"  @mouseout="out()">
          <div class="posten">
            <div class="BannerLii-list" v-for="(items,index) in it.defaultsSort" v-bind:style="{top:index*45+'px'}">
              <a href="#">{{items.name}}</a>

              <div class="BannerLii-left">
                <span v-for="item in items.sorts">
                  <a href="#">{{item}}</a>
                </span>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>

    <!-- <div v-bind:class="it.name"  v-bind:style="{zIndex: state?zIndexs:0}" v-for="it in className">{{it.index}}</div> -->
    <!-- 轮播图 -->
    <div class="block">
      <span class="demonstration"></span>
      <el-carousel>
        <el-carousel-item v-for="item in bannerImg" :key="item">
          <img class="imgList" v-bind:src='item' alt="">
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 右边 -->
    <div class="banner-right">
      <ul>
        <li class="banner-top">
          <i class="fa fa-diamond"></i>
           <span class="banner-pz">{{safe.title}}</span>
           <span>></span>
        </li>
        <li class="banner-li">
          {{safe.head}}
        </li>
        <li>
          <ul class="banner-ul">
            <li v-for="item in safe.list">{{item}}</li>
          </ul>
        </li>
        <li class="bannerlastli">
          <div class="banner-img"><img v-bind:src="safe.img" alt=""></div>
        </li>
      </ul>
    </div>
  </div>
  </div>
</template>

<script>
export default {
  name: "Banner",
  data() {
    return {
      number: 1,
      safe: {
        title: "品质保障",
        head: "生鲜头条",
        list: ["遍寻天下鲜招募吃货小分队","0元试吃 全新上线 抓紧尝鲜","一键立享 用心做顿好饭"],
        img: require("../../assets/6.png")
      },
      bannerImg: [
        require("../../assets/image/banner1.jpg"),
        require("../../assets/image/banner2.jpg"),
        require("../../assets/image/banner3.jpg"),
        require("../../assets/image/banner4.jpg")
      ],
      state: true,
      BannerLii: true,
      zIndexs: 100,
      className: [
        { name: "x-center youlei", index: 0 },
        { name: "x-center xialei", index: 1 },
        { name: "x-center xielei", index: 2 },
        { name: "x-center beilei", index: 3 },
        { name: "x-center roulei", index: 4 }
      ],
      listener: [
        {
          pic: require("../../assets/image/yu.png"),
          title: "鱼类",
          defaultsSort: [
            {
              name : "海水鱼",
              sorts: ["水鳕","冰鲜三文鱼","金目鲷","多宝鱼","金枪鱼","东星斑","冰岛红鱼","国产虹鳟鱼","墨西哥黄鱼","巴沙鱼","新西兰红宝石","无须鳕"]
            },
            {
              name : "淡水鱼",
              sorts: ["国产虹鳟鱼"]
            },
            {
              name : "其他",
              sorts: []
            }
          ]
        },
        {
          pic: require("../../assets/image/xia.png"),
          title: "虾类",
          defaultsSort: [
            {
              name : "敖龙虾",
              sorts: ["水鳕","冰鲜三文鱼","金目鲷","多宝鱼","金枪鱼","东星斑","冰岛红鱼","国产虹鳟鱼","墨西哥黄鱼","巴沙鱼","新西兰红宝石","无须鳕"]
            },
            {
              name : "岩龙虾",
              sorts: ["国产虹鳟鱼"]
            },
            {
              name : "对虾",
              sorts: ["水鳕","冰鲜三文鱼"]
            },
            {
              name : "长额虾",
              sorts: ["金目鲷","多宝鱼","金枪鱼","东星斑","冰岛红鱼"]
            }
          ]
        },
        {
          pic: require("../../assets/image/xie.png"),
          title: "蟹类",
          defaultsSort: [
            {
              name : "板蟹",
              sorts: ["水鳕","冰鲜三文鱼","金目鲷","多宝鱼","金枪鱼","东星斑","冰岛红鱼","国产虹鳟鱼","墨西哥黄鱼","巴沙鱼","新西兰红宝石","无须鳕"]
            },
            {
              name : "老虎蟹",
              sorts: ["国产虹鳟鱼"]
            },
            {
              name : "青蟹",
              sorts: ["水鳕","冰鲜三文鱼"]
            },
            {
              name : "皇帝蟹",
              sorts: ["金目鲷","多宝鱼","金枪鱼","东星斑","冰岛红鱼"]
            }
          ]
        },
        {
          pic: require("../../assets/image/bei.png"),
          title: "贝类",
          defaultsSort: [
            {
              name : "竹蛏",
              sorts: ["水鳕","冰鲜三文鱼","金目鲷","多宝鱼","金枪鱼","东星斑","冰岛红鱼","国产虹鳟鱼","墨西哥黄鱼","巴沙鱼","新西兰红宝石","无须鳕"]
            },
            {
              name : "贻贝",
              sorts: ["国产虹鳟鱼"]
            },
            {
              name : "螺类",
              sorts: ["水鳕","冰鲜三文鱼"]
            },
            {
              name : "蚝类",
              sorts: ["金目鲷","多宝鱼","金枪鱼","东星斑","冰岛红鱼"]
            }
          ]

        },
        {
          pic: require("../../assets/image/rou-x.png"),
          title: "肉类",
          defaultsSort: [
            {
              name : "牛肉",
              sorts: ["肉"]
            }
          ]
        }
      ]
    }
  },
  mounted() {
  },
  methods: {
    //控制导航栏方法
    over(index) {
      var that = this;
      var arr = $("#BannerLii").children();
      for (var i = 0; i < arr.length; i++) {
        if (i == index) {
          var n = i;
          arr[i].style.left = "-3px";
          this.BannerLi(arr[i], n);
        }
      }
      $("#BannerLii").css({ "left":'0%' });
    },
    BannerLi: function(index, n) {
      setTimeout(function() {
        var setArr = index.parentNode.children;
        for (var i = 0; i < setArr.length; i++) {
          if (i == n) {
            setArr[i].style.opacity = "1";
            // console.log(index);
          } else {
            setArr[i].style.opacity = "0";
          }
        }
      });
    },
    //关闭导航栏方法
    out(index) {
      var that = this;
      // that.BannerLii=false
      $("#BannerLii").css({ "left":"-900%"});
    },
    outright:function(){
      // 
      /*setTimeout(function(){
        // alert('ok')
          $("#BannerLii").css({ "left":"-900%"});
      },10000)*/
    }
  }
};
</script>


<style>
.banner-outer {
  position: relative;
  margin: 7px auto;
  width: 1200px;
  border: 1px solid #ccc;
  height: 280px;
}

.banner-outer .block {
  margin: 0 auto;
  width: 790px;
}

.el-carousel__item > .imgList {
  display: block;
  height: 280px;
  width: 100%;
}

.el-carousel__indicators {
  bottom: 20px;
}

.banner-outer .banner-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 205px;
  height: 280px;
  overflow: hidden;
}

.banner-outer .banner-left .first-list {
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
  color: #fff;
  background: #222;
}

.banner-outer .banner-left > ul > li {
  position: relative;
  padding: 18px 34px 0 40px;
  width: 130px;
  height: 31px;
  border-left: 1px solid transparent;
  border-top: 1px dotted #ddd;
}

.banner-outer .banner-left > ul > li:hover {
  transition: all 0.5s linear;
  background: rgba(191,191,191,0.5);
}

.banner-outer .banner-left > ul > li > img {
  position: absolute;
  left: 10px;
  top: 12px;
}

.banner-outer .banner-left > ul > li > h5 {
  display: block;
  position: relative;
  color: #222;
  top: -18px;
  left: -4px;
}

.banner-outer .banner-left > ul > li > h5:after {
  content: ">";
  position: absolute;
  right: -20px;
  top: 10px;
  height: 19px;
  line-height: 19px;
  font-family: simsun;
}

.banner-outer .banner-left > ul > li > div {
  position: absolute;
  top: 17px;
  left: 36px;
  font-size: 5px;
}

.banner-outer .banner-left > ul > li > div > a {
  display: block;
  width: 140px;
}

.banner-outer .banner-left > ul > li > div > a > span {
  display: inline-block;
  padding: 0 5px;
  color: #909090;
  border-left: 1px solid #909090;
  line-height: 1;
}


.banner-outer .banner-left .colorAnimate:hover {
  transition: all 0.3s linear;
  color: #DC143C;
  font-weight: bolder;
}

.banner-outer .x-center {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0 auto;
  width: 790px;
  height: 280px;
  background: rebeccapurple;
}

.banner-outer .youlei {
}
.banner-outer .banner-right {
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  height: 280px;
}
.banner-right {
  width: 202px;
  height: 280px;
  overflow: hidden;
  border-bottom: 1px solid #ccc;
}
.banner-right i {
  padding-left: 5px;
  color: #ffd600;
}
.banner-right span:last-child {
  float: right;
  font-size: 15px;
  color: #ccc;
  line-height: 20px;
}
.banner-top {
  width: 100%;
  height: 25px;
  border-bottom: 1px solid#ccc;
  background: white;
}
.banner-pz {
  font-size: 15px;
  color: #e60d0d;
}
.banner-li {
  height: 30px;
  border-bottom: 1px solid #ccc;
  line-height: 30px;
  text-align: center;
  background: white;
  color: green;
}
.banner-ul {
  background: white;
}
.banner-ul li {
  list-style: square;
  font-size: 10px;
  margin-left: 23px;
  padding-top: 4px;
  color: #383131;
}
.bannerlastli {
  background: white;
}
.banner-img {
  width: 153px;
  margin: 0 auto;
}
#BannerLii {
  width: 789px;
  margin: 0 auto;
  position: relative;
  z-index: 999;
}
#BannerLii .states {
  width: 753px;
  height: 238px;
  /*border-right: 1px solid #ddd;*/
  margin: 0 auto;
  padding: 10px 20px;
  padding-top: 32px;
  background: #fff;
  position: absolute;
  left: -900%;
  z-index: 999;
}

#BannerLii .posten {
  position: relative;
}

#BannerLii .BannerLii-list {
  width: 80px;
  line-height: 22px;
  padding: 3px 6px 0 0;
  font-weight: 700;
  position: absolute;
  top: 0;
  left: 0;
}

#BannerLii .BannerLii-list a {
  color: #E4393C;
  font-size: 15px;
}

#BannerLii .BannerLii-left {
  position: absolute;
  top: 0;
  left: 62px;
  display: block;
  width: 600px;
  padding: 3px 0 0;
  overflow: hidden;
}

#BannerLii .BannerLii-left > span {
  float: left;
  height: 14px;
  line-height: 14px;
  margin-top: 5px;
}

#BannerLii .BannerLii-left > span > a {
  float: left;
  font-size: 12px;
  text-align: center;
  font-weight: lighter;
  padding: 0 10px;
  height: 16px;
  border-left: 1px solid #e0e0e0;
  line-height: 16px;
  white-space: nowrap;
  color: #666;
}

#BannerLii .BannerLii-left > span > a:hover {
  color: #00c65d;
}





</style>
